<template>
  <div>
    <div class="history">
      <img src="../../../assets/history-banner.png">
      <div class="content">
        <div class="hasHistory" v-if="historylist.length  > 0">
          <ul>
            <li v-for="(item,key) in historylist">
              <p class="title" @click="editTitle($event,item)">
                {{item.title ? item.title : '亲，您的足迹还没有标题哦(点击这里编辑标题)'}}</p>
              <div class="imagegarelly">
                <swiper :options="swiperOption" class="swiper-box">
                  <swiper-slide v-for="(singleimg,childkey) in item.imglist" :key="singleimg" class="swiper-item">
                    <img v-lazy="singleimg" @click="jumpToDetail(item)"/>
                  </swiper-slide>
                  <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
                <div class="dateDesc">
                  <p>{{item.data}}</p>
                  <img src="../../../assets/history_14.png"/>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="noHistory flex" v-if="historylist.length === 0">
          <div>
            <p>这里还没有您的任何足迹呢！
            <p>
            <p>快来这里挑选活动留下你的精彩回忆吧！</p>
            <button class="primary" @click="goTo()">点击前往</button>
          </div>
        </div>
      </div>
    </div>
    <v-title :isshow="isShow" :selectedItem="selectedName" v-on:hideSlider="hideSlider"></v-title>
    <q-drawer right-side ref="detailContent">
      <v-detail :isshow="jumpDetail" :selectedItem="selectedName"></v-detail>
    </q-drawer>
  </div>
</template>
<script>
  import Vue from 'vue'
  import {HttpRequest} from '../../../common/js/httpFun'
  import {linklist} from '../../../common/js/mockdata'
  import VueAwesomeSwiper from 'vue-awesome-swiper'
  import EditTitle from './editTitle'
  import HistoryDetail from './historyDetail'
  Vue.use(VueAwesomeSwiper)
  export default({
    data () {
      return {
        'selectedName': '',
        'hasHistory': true,
        'isShow': false,
        'jumpDetail': false, // 是否调到图片详情
        'historylist': [],
        'swiperOption': {
          slidesPerView: 2.5,
          paginationClickable: true,
          spaceBetween: 20
        }
      }
    },
    computed () {
    },
    created () {

    },
    mounted () {
      let result = HttpRequest(linklist.historylist)
      result.then((response) => {
        if (response.status === 200) {
          this.historylist = response.body ? response.body : []
        }
      }, (response) => {

      }).catch((response) => {

      })
    },
    methods: {
      editTitle (event, item) {
        event.preventDefault()
        event.stopPropagation()
        this.isShow = !this.isShow
        this.selectedName = item
      },
      hideSlider () {
        this.isShow = false
      },
      jumpToDetail (item) {
        this.selectedName = item
        this.$refs.detailContent.open()
      },
      goTo () {
        this.$router.push({name: 'fun'})
      }
    },
    components: {
      'v-title': EditTitle,
      'v-detail': HistoryDetail
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  /* @import "index.styl" */
  @import "../../../common/stylus/imageSlider.styl"
  @import "../../../common/stylus/redifined.styl"
  img {
    width 100%
  }

  .history
    background-color #f8f8f8
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    z-index 2
    overflow-y scroll
    .content
      .noHistory
        text-align center
        align-items center
        position fixed
        top 0
        width 100%
        height 100vh
        div
          width 100%
          p
            setFontsize(14px)
            color #999
            margin-bottom cal(49) rem
          button
            setFontsize(14px)
            width cal(185) rem
            border-radius 3px
            height cal(62) rem
            color #fff
            min-height auto
            text-align center
            padding 0
            &.primary
              background yellowColor
              &:active:not(.disabled)
                background yellowColor !important
      .hasHistory
        ul
          li
            margin-top cal(20) rem
            background #fff
            border bordercolor
            .title
              height 1.173rem
              line-height 1.173rem
              padding-left cal(20) rem
              setFontsize(16px)
              margin 0
              color #333
              border-bottom bordercolor
            .imagegarelly
              padding-top cal(30) rem
              padding-left cal(20) rem
              padding-right cal(10) rem
              .dateDesc
                color #999
                display flex
                justify-content flex-start
                align-items center
                padding cal(30) rem
                padding-left 0
                padding-right 0
                p
                  setFontsize(12px)
                  margin 0
                  flex 1 1 auto
                img
                  width cal(44) rem
</style>
